import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View } from 'react-native';

import _ from 'lodash';
import Star from './Star'
import Fonts from "../../config/theme/standard/fonts";
import Color from "../../config/theme/standard/color";
import Label from '../label/index';

export default class Raty extends Component {

    constructor() {
        super();
        this.state = {
            prevPropsPosition: 1,
            position: 1
        }
    }

    componentDidMount() {
        const { defaultRating } = this.props;
        this.setState({ 
            prevPropsPosition:defaultRating,
            position: defaultRating
        })
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (('defaultRating' in nextProps) && (nextProps.defaultRating !== prevState.prevPropsPosition)) {
            return {
                prevPropsPosition:nextProps.defaultRating,
                position: nextProps.defaultRating
            };
        }
        return null;
    }

    renderStars(rating_array) {
        return _.map(rating_array, (star, index) => {
            return star
        })
    }

    starSelectedInPosition(position) {
        const { onFinishRating } = this.props;
        if (typeof onFinishRating == 'function'){
            onFinishRating(position);
            this.setState({ position: position })
        }
    }

    render() {
        const { position } = this.state;
        const { count, review, reviews, showReview, title, showTitle, size, horizontal, disabled ,titlePadding,showPadding} = this.props;
        const rating_array = [];

        _.times(count, index => {
            rating_array.push(
                <Star
                    key={index}
                    position={index + 1}
                    marginLeft={index == 0 ? 0 : size == 'large' ? 8  : 0}
                    starSelectedInPosition={this.starSelectedInPosition.bind(this)}
                    fill={position >= index + 1}
                    half={position > index}
                    size={size}
                    disabled={disabled}
                />
            )
        });

        let reviewTextStyle = [styles.reviewText];
        let textStyle= [styles.text];
        if (!horizontal) {
            reviewTextStyle.push({paddingLeft: 0, paddingTop: 12});
        }
        switch (size) {
            case 'large':
                break;
            case 'middle':
                textStyle.push({fontSize: Fonts.raty.middleFontSize});
                if (!horizontal) {
                    reviewTextStyle.push({paddingTop: 8});
                }
                break;
            case 'small':
                textStyle.push({fontSize: Fonts.raty.smallFontSize});
                if (!horizontal) {
                    reviewTextStyle.push({paddingTop: 5});
                }
                break;
            default:
                break;;
        }
       
        return (
            <View style={[styles.ratingContainer, !horizontal && styles.horizontal]}>
                { showTitle &&  
                    <View style={[showPadding?{paddingRight:titlePadding}:{paddingRight:8}]}>
                        <Label text={title} labelStyle={textStyle}/>
                    </View>
                }
                <View style={styles.starContainer}>
                    {this.renderStars(rating_array)}
                </View>
                { showReview &&
                    <View style={reviewTextStyle}>
                        <Label text={disabled ? review : reviews[position - 1]} labelStyle={textStyle}/>
                    </View>
                }
            </View>
        );
    }
}

Raty.propTypes = {
    defaultRating: PropTypes.number,
    //初始分数
    count: PropTypes.number,
    //最高分
    review: PropTypes.string,
    //禁用时，文案内容，即当前分数
    reviews: PropTypes.array,
    //文案内容
    showReview: PropTypes.bool,
    //是否展示文案
    title: PropTypes.string,
    //标题内容
    showTitle: PropTypes.bool,
    //是否传入标题边距
    showPadding:PropTypes.bool,
    //传入标题边距
    titlePadding : PropTypes.number,
    //是否展示标题
    size: PropTypes.oneOf(['large', 'middle', 'small']),
    //尺寸
    horizontal: PropTypes.bool,
    //是否横向排布
    disabled: PropTypes.bool,
    //是否禁用，出现半星时必须设置禁用
    onFinishRating: PropTypes.func,
    //点击事件
};

Raty.defaultProps = {
    defaultRating: 1,
    reviews: ["1分", "2分", "3分", "4分", "5分"],
    showReview: true,
    showTitle: true,
    count: 5,
    size: 'large',
    horizontal: true,
    disabled: false,
    showPadding:false,
    onFinishRating: () => {},
};

const styles = StyleSheet.create({
    ratingContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    horizontal: {
        flexDirection: 'column',
    },
    // title: {
    //     paddingRight: 8
    // },
    reviewText: {
        paddingLeft: 8
    },
    text: {
        fontSize: Fonts.raty.textFontSize,
        color: Color.raty.text,
    },
    starContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    }
});
